<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" session="false" %>
<%@page import="com.eos.data.datacontext.DataContextManager"%>	
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- 
  - Author(s): Administrator
  - Date: 2018-03-22 20:42:07
  - Description:
-->
<head>
<title>HR人员选择控件</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <%@include file="/common/common.jsp" %>
    <%
    	String jsonEmpId =request.getParameter("empId");
    	
     %>
    <style type="text/css">
    	.form-control{
    		  width: 13%;
    		  float: left;
    		  height: 28px;
    	}
    	.span1{
    		  float: left;
    		  padding-top:8px;
    	}
    	.span-name{
    	}
    	.span-oddnum{
    		margin-left: 40px;
    	}
    	
    	.layui-table-cell{
    		text-align: center;
    	}
    	#content-data{
    		height:364px; 
    		width:357px;
    		overflow-x:auto; 
    		float: left;
    		border-top: 1px solid #e6e6e6;
    		border-bottom: 1px solid #e6e6e6; 
    		margin-top: 39px;
    	} 
    	.layui-tree li{
    		overflow: inherit;
    	} 
    	 
    	.btn-query{
    		width: 70px;
    		height: 29px;
    		padding-top: 3px;
    		margin-left: 40px;
    	}
    	.btn-ok{
    		width: 70px;
    		height: 29px;
    		padding-top: 3px;  
    		margin-left: 50%;   
    	}
    	.btn-cancel{
    		width: 70px;
    		height: 29px;
    		padding-top: 3px;  
    		margin-left: 6px;
    	}
		.layui-table-cell .layui-form-checkbox[lay-skin="primary"] {
		
		    top: 0px;
		    vertical-align: middle;
		
		}
		.layui-form-checkbox[lay-skin="primary"]:hover i {
		    border-color: #f0ad4e;
		    color: #fff;
		}
		.layui-form-checked[lay-skin="primary"] i {
		    border-color: #f0ad4e;
		    background-color: #f0ad4e;
		    color: #fff;
		}
		.content{
			width: 100%;
			height: 60px;
			border-style: solid;
			border-color: #E3E3E3;
			border-width: 1px;
			overflow: scroll;
		}
	    .label-info {
		    border-radius: 5px;
		    font-size: 100%;
		    line-height: 1;
		    margin-left: 15px;
		    margin-top: 10px;
		    font-weight: 100;
		    color: #0b8df5;
		    background-color: #b2daf4;
		    float: left;
		    padding: .2em .6em .3em;
		}
		.xe {
		    font-size: 12px;
		    color: #ffffff;
		    margin-left: 10px;
		    cursor: pointer;
		}
    </style>
</head>
<body>
	<div id="content-data"> 
		<ul id="demo1" class="demo1"></ul>
	</div>

<div>
	<span class="span1 span-name">姓名：</span><input type="text" id="empName" class="form-control" >
	  <span class="span1 span-oddnum"> 工号：</span><input type="text" id="empId" class="form-control">
	
	<button type="button" id="select"  onclick="selectName()" class="btn btn-primary btn-query returnEvent_select"   data-complete-text="Loading finished">查询</button>
	<table id="demo" lay-filter="test" class="layui-hide">
	
	</table>
					
</div>
<div class="content">
	
</div>
	<script type="text/javascript">
	
	//回车事件
	returnEvent();
	
   var list="[]";	
   var  jsonList = JSON.parse(list);
  layui.use('table', function(){
  var table = layui.table;
  
});
   	
    $(function() {
    showName("","","00000001"); //默认加载集团人员
     $.ajax({
           url: 'org.gocom.components.coframe.tools.PlugIn.sectionBuild.biz.ext',
				type:'POST',
				cache: false,
				success:function(data){
				
					layui.use(['tree', 'layer'], function(){
					  var layer = layui.layer
					  ,$ = layui.jquery; 
					  layui.tree({
					    elem: '#demo1' //指定元素
					    ,skin: 'red'
					    ,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
					    ,click: function(item){ //点击节点回调
					      /* layer.msg('当前节名称：'+ item.name + '<br>全部参数：'+ JSON.stringify(item)); */
					      showName("","",item.id); 
					    }
					    ,nodes:data.orgorganizantion
					  });
		  });
				
				}
			});
		var jsonEmpId="<%=jsonEmpId %>"	;
		getOld(jsonEmpId);	
    });
    
    function getOld(id){
    		$.ajax({
           		url: 'org.gocom.components.coframe.tools.PlugIn.queryEmployeeInselect.biz.ext',
				type:'POST',
				data:{
  				EmpID:id
  				},
				success:function(data){
				if(id==null||id=="undefined"){
				}else{
					jsonList=data.employee;
						$(jsonList).each(function(i,obj){
						    	
							var html='<span class="label-info">'+obj.username+'<i class="layui-icon xe" onclick="deleteData(\''+i+'\')" data="'+i+'">&#x1006;</i></span>'
							$(".content").append(html);
						});
				}
					
				}
			});
    
    
    }
    
    var tables;
    function showName(eid,name,id){
    	$.ajax({
  			url:"org.gocom.components.coframe.tools.PlugIn.queryEmployee.biz.ext",
  			type:"POST",
  			datatype: "json",
  			data:{
  				enpId:eid,
  				empName:name,
  				orgId:id
  			},
  			success:function(data){
  				scheduleList='[]';
  				var  jsonArray = JSON.parse(scheduleList);
  				$(data.ViewEmployee).each(function(index,obj){
  					var arr = {"username": obj.empname, "empid":obj.empid,"job":obj.posiname,"email":obj.email};
					jsonArray.push(arr);
  				});
  				layui.use('table', function(){
		  
		  	var table = layui.table;
		  	table.render({
		    elem: '#demo'
		    ,height: 364
		    ,data: jsonArray
		    ,cols: [[
		      /* {type:'checkbox'} */
		      {field:'empid', width:100, title: '工号', sort: true,event:'setSign'}
		      ,{field:'username', width:220, title: '姓名',event:'setSign'}
		      ,{field:'job', width:220, title: '职位', sort: true,event:'setSign'} 
		      ,{field:'email', width:220, title: '邮箱', sort: true,event:'setSign'} 
		    ]]
		    ,page: true
		  });
		  
		 /* table.on('checkbox', function(obj){
			  
			  
			  if(obj.type=="all"){
			  	var list2="[]";	
   				jsonList = JSON.parse(list2);
			  	var checkStatus = table.checkStatus('demo');
			  	$(checkStatus.data).each(function(i,obj1){
			  		jsonList.push(obj1);
			  	});
			  }else{
			  		if(obj.checked==true){
				  	jsonList.push(obj.data);
				  }else{
				  	$(jsonList).each(function(i,entry){
				  		
				      if(entry.order==obj.data.order){
				      	jsonList.splice(i,1);
				      }
				  }); 
				  }
			  
			  }
			}); */
			table.on('tool(test)', function(obj){//单击数据表格单击事件
				if(obj.event === 'setSign'){
				datas = obj.data;//获取整行值转给全局变量
				bool=true;//用来标识是否点击到表格
				//判断是否一存在
				for (var i = 0; i < jsonList.length; i++) {
				    var obj2 = jsonList[i];
				    if (obj2.empid==datas.empid) {
				        layer.msg("已选择");
				        return;
				    }
				}
				jsonList.push(obj.data);
				console.log(jsonList);
				$(".content").html("");
				$(jsonList).each(function(i,obj){
					    	var html='<span class="label-info">'+obj.username+'<i class="layui-icon xe" onclick="deleteData(\''+i+'\')" data="'+i+'">&#x1006;</i></span>'
					    	$(".content").append(html);
					    });
				}
			});
			
		var $ = layui.$, active = {
		    SelectedEmp: function(){ //获取选中数据 
		      var checkStatus = table.checkStatus('demo'),
		    	data = checkStatus.data;
		      	
		      	if(data.length>='2'){
		      		layer.msg('请选择单个人员');
		      		return; 
		      	}else{
		      		
		      		layer.alert(JSON.stringify(data));
		      	}
		    }
			};
			
			
			
			$('.btn-ok').on('click', function(){
			    var type = $(this).data('type');
			    active[type] ? active[type].call(this) : '';
			  });
		});
  				
  			}
  			
  			});
    	 
    }
    
    function selectName(){
    	showName($("#empId").val(),$("#empName").val(),"");
    }
    function getData(){
        return jsonList;
    }
    
    function deleteData(i){
    	jsonList.splice(i,1);
    	$(".content").html("");
    	$(jsonList).each(function(i,obj){
					    	
			var html='<span class="label-info">'+obj.username+'<i class="layui-icon xe" onclick="deleteData(\''+i+'\')" data="'+i+'">&#x1006;</i></span>'
			$(".content").append(html);
		});
    }
    </script>
</body>
</html>